<!-- 学校地图 -->
<template>
	<zh-app style="font-family: '阿里巴巴普惠体'">
		<!-- 导航栏 -->
		<zh-navbar title="学校地图" color="#85a5ff" linear="right"  />
		<zh-filterMenu @close="getSchPoint" @click="filterClick" :height="elderFlag?140:70">
			<!-- 统筹区 -->
			<zh-filterMenu-item :title="data.areaName">
				<view hover-class="opactiy-7" v-for="(item,index) in data.areaCodeDict" :key="'area'+index"
					@tap="onSelectArea(item)"
					class="flex-1 flex-row flex flex-row-center-between" style="height: 76rpx;">
					<zh-text :color="item.dictKey===data.areaCode?'primary':''" :label="item.dictValue" />
					<tm-icon :font-size="24" color="primary" v-if="item.dictKey===data.areaCode" name="tmicon-check" />
				</view>	
			</zh-filterMenu-item>
			<!-- 学校性质 -->
			<zh-filterMenu-item :title="data.schoolNatureName">
				<view hover-class="opactiy-7" v-for="(item,index) in data.schoolNatureDict" :key="'nature'+index"
					@tap="onSelectNature(item)"
					class="flex-1 flex-row flex flex-row-center-between" style="height: 76rpx;">
					<zh-text :color="item.dictKey===data.schoolNature?'primary':''" :label="item.dictValue" />
					<tm-icon :font-size="24" color="primary" v-if="item.dictKey===data.schoolNature" name="tmicon-check" />
				</view>	
			</zh-filterMenu-item>
			<!-- 学段 -->
			<zh-filterMenu-item :title="data.schoolCategoryName">
				<view hover-class="opactiy-7" v-for="(item,index) in data.schoolCategoryDict" :key="'nature'+index"
					@tap="onSelectCategory(item)"
					class="flex-1 flex-row flex flex-row-center-between" style="height: 76rpx;">
					<zh-text :color="item.dictKey===data.schoolCategory?'primary':''" :label="item.dictValue" />
					<tm-icon :font-size="24" color="primary" v-if="item.dictKey===data.schoolCategory" name="tmicon-check" />
				</view>	
			</zh-filterMenu-item>
			<!-- 方案名称 -->
			<zh-filterMenu-item :height="650" title="学校搜索" un-icon="tmicon-stepmode" icon="tmicon-menu">
				<zh-input 
					:height="40" 
					v-model="data.schoolName"
					placeholder="输入学校名称搜索" 
					placeholderStyle="text-align: center;" 
					showClear
				/>
			</zh-filterMenu-item>
		</zh-filterMenu>
		<!-- 地图 -->
		<view id="container"></view>
		<!-- 说明 -->
		<zlb-footer></zlb-footer>
	</zh-app>
</template>
<script lang="ts" setup>
	import {ref, reactive, watch, shallowRef} from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import AMapLoader from '@amap/amap-jsapi-loader';
	import { system } from "@/store";
	// ------------------接收传入参数(组件)-------------------

	// ------------------变量区------------------------------
	// 地图对象
	let map = shallowRef(null);
	// 主数据
	const data = reactive({
    loading:false,
    canSearch:false,
		// 标点数组
		pointArr: [
			{
				title: '东阳市七彩泡泡幼儿园',
				longitude: 120.174408,
				latitude: 29.300955,
			},{
				title: '三单乡中小学(小学部)',
				longitude: 120.633874,
				latitude: 29.295942,
			},{
				title: '东阳市吴宁街道博乐幼儿园',
				longitude: 120.238664,
				latitude: 29.261282,
			},
		],
		areaCode:'',
		areaName:'报名区县',
    schoolNature: 'all',
    schoolNatureName: '学校性质',
    schoolNatureDict:[
      {dictKey:'all',dictValue:'学校性质'},
      {dictKey:'0',dictValue:'公办'},
      {dictKey:'1',dictValue:'民办'},
      {dictKey:'2',dictValue:'民转公'}
    ],
    schoolCategory: 'all',
    schoolCategoryName: '所有学段',
    schoolCategoryDict:[
      {dictKey:'all',dictValue:'所有学段'},
      {dictKey:'1',dictValue:'幼儿园'},
      {dictKey:'2',dictValue:'小学'},
      {dictKey:'3',dictValue:'初中'}
    ],
    schoolName: '',
    areaCodeDict:[] as Array<any>,
	})
	const elderFlag = computed(() => {
		return system.uiStyle === "elder";
	});
	// ------------------方法区------------------------------
	// 地图初始化
	const initMap = () => {
		AMapLoader.load({
			key:"1e35117539e6b0e35fc219fe9d6c0644",    // Web端开发者Key
			version:"2.0",      // JSAPI 的版本，缺省时默认为 1.4.15
			plugins:[''],       // 插件列表
		}).then((AMap)=>{
			// 实例化地图
			map = new AMap.Map("container",{  //地图容器id
				viewMode:"3D",    // 是否为3D地图模式
				center: [120.24179, 29.290158],//中心点位置
				zoom: 15
			});
			// 添加标点
			addMarker(AMap,map, data.pointArr);
		}).catch(err => {
			console.log(err);
		})
	}
	// 添加标点
	const addMarker = (AMap:any,map: any, pointArr: Array<any>) => {
		for (let point of pointArr) {
			// 添加标点
			var marker = new AMap.Marker({
				position: [point.longitude, point.latitude],
				// 偏移量
				offset: new AMap.Pixel(0, 0),
				title: point.schoolName,
				map: map,
			});
			// 文本标注
			marker.setLabel({
				offset: new AMap.Pixel(0, 30),  // 文本标注偏移量
				content: '<div style="background:blue;font-weight:700;color:#ffffff;font-size:18px;line-height:20px;padding: 5px">' + point.schoolName+ '</div>', // 文本标注内容
				direction: 'center', // 文本标注方位
			});
		}
	}
	// 获取学校标点数据
	const getSchPoint = () => {
		const params: any = {
			areaCode: data.areaCode,
      schoolName: data.schoolName,
		}
    if(data.schoolNature!=='all'){
      params.schoolNature=data.schoolNature
    }
    if(data.schoolCategory!=='all'){
      params.schoolCategory=data.schoolCategory
    }
		$api.common.send.post("eduschool0008", params).then((res: any) => {
			data.pointArr=res.result
			initMap();
		})
	}
	//获取可选行政区划
	const getAreaCode=()=>{
    data.loading=true
	  $api.common.send.post("dict0028", {}).then((res: any) => {
			data.areaCodeDict = res.result||[];
			if(data.areaCodeDict.length>=1){
			  data.areaCode=data.areaCodeDict[0].dictKey
			  data.areaName=data.areaCodeDict[0].dictValue
			  getSchPoint()
			}
		}).catch(()=>{
       data.loading=false
    })
	}
	//选择行政区划
	const onSelectArea=async (item: any)=>{
    if(data.areaCode!=item.dictKey){
      data.canSearch=true
    }
		data.areaCode=item.dictKey
		data.areaName=item.dictValue
    
	}
	const onSelectNature= (item: any)=>{
    if(data.schoolNature!=item.dictKey){
      data.canSearch=true
    }
		data.schoolNature=item.dictKey
		data.schoolNatureName=item.dictValue
    
	}
  const onSelectCategory= (item: any)=>{
    if(data.schoolCategory!=item.dictKey){
      data.canSearch=true
    }
		data.schoolCategory=item.dictKey
		data.schoolCategoryName=item.dictValue
    
	}
  const filterClick=()=>{
		//下拉过滤点击时触发
		data.canSearch=false
	}
  //名称搜索输入
	watch(
	  () => data.schoolName,
	  () => {
	    data.canSearch=true
	  },
	  { deep: true }
	);
	// ------------------钩子函数----------------------------
	// 初始化
	onLoad((options: any) => {
		console.log('options = ', options);
		getAreaCode();
	})
</script>
<style lang="scss" scoped>
	#container{
		padding: 0;
		margin: 0;
		width: 750rpx;
		height: 1250rpx;
		z-index:0;
		position: relative;
	}
	
	.areaChange {
		padding: 10rpx 20rpx;
		background-color: #597ef7;
		border-radius: 12rpx;
		z-index:1;
		position: absolute;
		top: 40px;
		right: 60rpx;
	}
</style>